<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Adjust Div Height</title>
<style>
    #container {
        width: 300px;
        height: 300px;
        border: 1px solid black;
        overflow: hidden;
        position: relative;
    }

    #handle {
        width: 100%;
        height: 10px;
        background-color: #007bff;
        cursor: ns-resize;
        position: absolute;
        bottom: 0;
    }
</style>
</head>
<body>
    <div id="container">
        <div id="handle"></div>
    </div>

    <script>
        const container = document.getElementById('container');
        const handle = document.getElementById('handle');
        let isResizing = false;
        let startY = 0;

        handle.addEventListener('mousedown', startResize);
        handle.addEventListener('touchstart', startResize, { passive: false });

        function startResize(e) {
            isResizing = true;
            if (e.type === 'mousedown') {
                startY = e.clientY;
            } else if (e.type === 'touchstart') {
                startY = e.touches[0].clientY;
            }
            document.addEventListener('mousemove', resize);
            document.addEventListener('touchmove', resize, { passive: false });
            document.addEventListener('mouseup', stopResize);
            document.addEventListener('touchend', stopResize, { passive: false });
        }

        function resize(e) {
            e.preventDefault();
            if (isResizing) {
                const newHeight = container.clientHeight + (e.clientY || e.touches[0].clientY) - startY;
                if (newHeight >= 0) {
                    container.style.height = `${newHeight}px`;
                }
                startY = e.clientY || e.touches[0].clientY;
            }
        }

        function stopResize() {
            isResizing = false;
            document.removeEventListener('mousemove', resize);
            document.removeEventListener('touchmove', resize);
            document.removeEventListener('mouseup', stopResize);
            document.removeEventListener('touchend', stopResize);
        }
    </script>
</body>
</html>